<!DOCTYPE html>
<html>
<head>
<title>Volume Meter</title>
<script src="../lib/zeu.js"></script>
<script src="examples.js"></script>
<link rel="stylesheet" href="example.css">
</head>
<body>
  <div class="container">
    <h3>Default Size</h3>
    <pre><code>
width: 100px; 
height: 200px;
    </code></pre>

    <h3>Default</h3>
    <div id="volume-meter-1" style="width: 100px; height: 200px;"></div>

    <h3>Options</h3>
    <pre><code>
var volumeMeter2 = new zeu.VolumeMeter(
  document.getElementById('volume-meter-2'), {
    min: 0,
    max: 200,
    fillColor: 'green',
    fontColor: 'black',
    lineColor: 'black',
    lineWidth: 5
  });
volumeMeter2.fillColor = 'red';
volumeMeter2.fontColor = 'green';
volumeMeter2.value = 50;
    </code></pre>
    <div id="volume-meter-2" style="width: 100px; height: 200px;"></div>
  
    <h3>Size X 2</h3>
    <div id="volume-meter-3" style="width: 200px; height: 400px;"></div>

  </div>
</div>

<script type="text/javascript">

  var volumeMeter1 = new zeu.VolumeMeter(document.getElementById('volume-meter-1'));

  var volumeMeter2 = new zeu.VolumeMeter(
    document.getElementById('volume-meter-2'), {
      min: 0,
      max: 200,
      fillColor: 'green',
      fontColor: 'black',
      lineColor: 'black',
      lineWidth: 5
    });
  volumeMeter2.fillColor = 'red';
  volumeMeter2.fontColor = 'green';
  volumeMeter2.value = 100;

  setInterval(function() {
    volumeMeter2.value = getRandomInt(10, 190);
  }, 2000);

  var volumeMeter3 = new zeu.VolumeMeter(document.getElementById('volume-meter-3'));
</script>
</body>
</html>
